<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.12.1/css/all.css">
    <link rel="stylesheet" href="libs/glide/glide.core.min.css">
    <link rel="stylesheet" href="libs/glide/glide.theme.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" />
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="libs/scrollReveal/scrollreveal.min.js"></script>
    <title>维达科技 愿原力与你同在</title>
</head>

<body>
    <header class="open">
        <div class="logo">
            <img src="images/darth-vader.png" class="vader">
            <!-- <div class="vader1">Vader</div>  -->
        </div>

        <nav>
            <a href="#home">首页</a>
            <a href="#about-us">解决方案</a>
            <a href="#showcases">成功案例</a>
            <a href="#service">资源与服务</a>
            <a href="#cmap">基础设施</a>
            <a href="#team-intro">团队介绍</a>
            <a href="#"><i class="fas fa-search"></i></a>
        </nav>
        <!-- 折叠导航按钮，屏幕缩小时使用 -->
        <div class="burger">
            <div class="burger-line1"></div>
            <div class="burger-line2"></div>
            <div class="burger-line3"></div>
        </div>
    </header>
    <!-- 定义轮播图 -->
    <div id="home" class="glide">
        <!-- 轮播图轨迹 -->
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                <!-- 第一个轮播图 -->
                <div class="glide__slide">
                    <!-- 标题 -->
                    <div class="slide-caption">
                        <h1>用创新点缀人生，让科技融入理想。</h1>
                        <h3>科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想。</h3>
                        <button class="explore-btn">探索更多</button>
                    </div>
                    <!-- 背景遮罩 -->
                    <div class="backdrop"></div>
                    <!-- 轮播图片 -->
                    <img src="images/people-in-couch-1024248.jpg" alt="" />
                </div>
                <!-- 第二个轮播图 -->
                <div class="glide__slide">
                    <!-- 标题 -->
                    <div class="slide-caption">
                        <h1>科技改变世界</h1>
                        <h3>立足科技发展，着力自主创新。加速科技进步，为全市经济社会发展提供有力支撑。凝聚科技创新，成就创新梦想。</h3>
                        <button class="explore-btn">探索更多</button>

                    </div>
                    <div class="backdrop"></div>
                    <!-- 视频静音自动播放循环播放  -->
                    <video src="videos/working-man.mp4" muted autoplay loop></video>
                </div>
            </div>

        </div>
        <!-- 切换轮播图按钮 -->
        <div class="glide__arrows" data-glide-el="controls">
            <!-- 上一张 -->
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                < </button>
                    <!-- 下一张 -->
                    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                        >
                    </button>
                    <!-- 圆点 -->
                    <div class="glide__bullets" data-glide-el="controls[nav]">
                        <button class="glide__bullet" data-glide-dir="=0"></button>
                        <button class="glide__bullet" data-glide-dir="=1"></button>
                    </div>

        </div>
    </div>
    <div class="content-wrapper">
        <section id="about-us" class="about-us">
            <h2 class="title1">解决方案</h2>
            <p class="intro">
                维达科技(Vader)具有全面、落地的AI开放、安全的Big Data持续、先进的Cloud技术,支持192个业务场景的全栈解决方案。
            </p>
            <div class="features">
                <div class="feature">
                    <i class="fas fa-gamepad"></i>
                    <h4 class="feature-title">游戏</h4>
                    <p class="feature-content">维达为游戏行业提供一系列解决方案，涵盖开发、运维、运营等领域和场景。针对不同类型的游戏提供灵活而稳定的部署方案。</p>
                </div>
                <div class="feature">
                    <i class="fab fa-youtube"></i>
                    <h4 class="feature-title">视频</h4>
                    <p class="feature-content">维达拥有覆盖全球的视频发布网络和音视频领域数十年的深厚技术积淀，提供直播、点播、云通信等产品，为视频应用提供一站式解决方案。</p>
                </div>
                <div class="feature">
                    <i class="fab fa-internet-explorer"></i>
                    <h4 class="feature-title">网站</h4>
                    <p class="feature-content">维达可为企业、政府和非营利性组织等提供一站式的网站服务。对任何网站，维达都可根据需求提供对应的网站服务，解决所有问题。</p>
                </div>
                <div class="feature">
                    <i class="fas fa-store"></i>
                    <h4 class="feature-title">电商</h4>
                    <p class="feature-content">维达为电商客户提供高效便捷、安全可靠的云服务产品，支持多种部署模式，可帮助企业快速搭建电商平台、完成资源的创建和配置。</p>
                </div>
                <div class="feature">
                    <i class="fas fa-file-invoice-dollar"></i>
                    <h4 class="feature-title">金融</h4>
                    <p class="feature-content">维达金融云解决方案，满足最严苛的设计要求，兼容传统金融业务架构，助您无负担快速迁云；个性化定制及灵活扩展，让您专注业务领域。</p>
                </div>
                <div class="feature">
                    <i class="fas fa-database"></i>
                    <h4 class="feature-title">大数据</h4>
                    <p class="feature-content">维达为客户提供完善的大数据处理平台和大数据分析服务。帮助客户对数据进行收集、存储、处理、分析和可视化，有效提高企业数据资产管理效率。</p>
                </div>

            </div>
        </section>
        <section id="showcases" class="showcases section-bg">
            <h2 class="title1">成功案例</h2>
            <div class="filter-btns">
                <button class="filter-btn active" data-filter="*">全部</button>
                <button class="filter-btn" data-filter=".web">web</button>
                <button class="filter-btn" data-filter=".science">科研</button>
                <button class="filter-btn" data-filter=".mobile">移动</button>
            </div>
            <div class="cases">
                <div class="case-item web science">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item web science">
                    <img src="images/photo-of-imac-near-macbook-1029757.jpg" alt="">
                </div>
                <div class="case-item web mobile">
                    <img src="images/apple-laptop-notebook-office-39284.jpg" alt="">
                </div>
                <div class="case-item web mobile">
                    <img src="images/apple-apple-device-design-desk-285814.jpg" alt="">
                </div>
                <div class="case-item mobile science">
                    <img src="images/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item mobile science">
                    <img src="images/person-holding-a-smartphone-892757.jpg" alt="">
                </div>
                <div class="case-item web">
                    <img src="images/blur-close-up-code-computer-546819.jpg" alt="">
                </div>
                <div class="case-item mobile">
                    <img src="images/bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg" alt="">
                </div>
            </div>
        </section>
        <section id="service" class="service">
            <h2 class="title1">资源与服务</h2>
            <p class="intro">
                维达云与云市场众多优秀第三方服务供应商合作，<br>
                <br>
                为您提供
                <i>50+</i>
                品类，超过
                <i>6.7K+</i>
                商品，以更多的选择满足不同的业务需求
            </p>
            <div class="services">
                <div class="service-item">
                    <i class="fas fa-terminal"></i>
                    <h2 class="service-title">开发者中心</h2>
                    <p class="service-content">维达为开发者提供了一套完整的API和相关文档，方便开发者调用维达云资源。</p>
                </div>
                <div class="service-item">
                    <i class="fas fa-shield-alt"></i>
                    <h2 class="service-title">数据保障</h2>
                    <p class="service-content">维达非常重视客户的数据和基础设施的安全性，确保所有的产品和服务符合《通用数据保护条例》(GDPR)规定。</p>
                </div>
                <div class="service-item">
                    <i class="fas fa-sitemap"></i>
                    <h2 class="service-title">运维服务</h2>
                    <p class="service-content">运维服务是维达服务团队为客户提供了一系列专业服务产品，覆盖了业务的整个生命周期，保障了客户业务能够稳定运行。</p>
                </div>
                <div class="service-item">
                    <i class="fas fa-graduation-cap"></i>
                    <h2 class="service-title">培训课程</h2>
                    <p class="service-content">维达架构师带来的众多云产品的介绍和操作演示，帮助您学习和使用云产品。</p>
                </div>
                <div class="service-item">
                    <i class="fas fa-compass"></i>
                    <h2 class="service-title">备案服务</h2>
                    <p class="service-content">维达为您提供专业、高效、便捷的ICP网站备案服务</p>
                </div>
                <div class="service-item">
                    <i class="fas fa-school"></i>
                    <h2 class="service-title">专家服务</h2>
                    <p class="service-content">7*24技术支持，90s快速响应，一对一架构指导，伴随您业务发展的每一步。</p>
                </div>
            </div>
        </section>
        <section id="cmap" class="map">
            <h2 class="title1">维达云基础设施</h2>
            <p class="intro">
                开放33个地理区域，拥有500多个加速节点，为更多企业提供强有力的技术支持，助力业务飞速拓展。
            </p>
            <img src="images/cmap.png" class="cmap">

        </section>
        <section id="data-section" class="data-section">
            <div class="data-piece">
                <i class="fas fa-user-secret"></i>
                <div class="data-desc">抵御攻击</div>
                <div class="num">477300288</div>
            </div>

            <div class="data-piece">
                <i class="fas fa-satellite"></i>
                <div class="data-desc">技术专利</div>
                <div class="num">288</div>
            </div>

            <div class="data-piece">
                <i class="fas fa-server"></i>
                <div class="data-desc">服务器数</div>
                <div class="num">4237429</div>
            </div>

            <div class="data-piece">
                <i class="fas fa-user-tie"></i>
                <div class="data-desc">开发者数</div>
                <div class="num">1532145</div>
            </div>
        </section>
        <section id="team-intro" class="team-intro section-bg">
            <h2 class="title1">团队介绍</h2>
            <div class="team-members">

                <div class="team-member">
                    <div class="photo">
                        <img src="images/Palpatine.jpg" alt="">
                    </div>
                    <h4 class="name">Sheev Palpatine</h4>
                    <p class="position">CEO</p>
                    <ul class="social-links">
                        <li><a href="#">
                        <li class="fab fa-weixin"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-weibo"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-github"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>

                <div class="team-member">
                    <div class="photo">
                        <img src="images/vader.jpg" alt="">
                    </div>
                    <h4 class="name">Darth Vader</h4>
                    <p class="position">CTO</p>
                    <ul class="social-links">
                        <li><a href="#">
                        <li class="fab fa-weixin"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-weibo"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-github"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>

                <div class="team-member">
                    <div class="photo">
                        <img src="images/asuok.jpg" alt="">
                    </div>
                    <h4 class="name">Ahsoka Tano</h4>
                    <p class="position">CSO</p>
                    <ul class="social-links">
                        <li><a href="#">
                        <li class="fab fa-weixin"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-weibo"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-github"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>

                <div class="team-member">
                    <div class="photo">
                        <img src="images/pademei.jpg" alt="">
                    </div>
                    <h4 class="name">Padmé Amidala</h4>
                    <p class="position">CFO</p>
                    <ul class="social-links">
                        <li><a href="#">
                        <li class="fab fa-weixin"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-weibo"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-github"></i></a></li>
                        <li><a href="#">
                        <li class="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>

            </div>
        </section>
    </div>
    
    <div id="footer" class="container-fluid">
        <div class="logo">
            <img src="@/assets/img/logo_white.png" alt="logo图">
        </div>
        <p class="title">公司企业网站模板</p>
        <p class="address_tel_fax">
            <span>地址：公司地址公司地址公司地址公司地址</span>
            <span>Tel：888-888-888</span>
            <span>Fax：8888-88888888</span>
        </p>
        <p class="email_wx">
            <span>邮箱：liyunkun_11@163.com</span>
            <span>公司微信号：ilyk_gg</span>
        </p>
        <p class="copy">Copyright &copy; 2018 - 2019 公司名称公司名称</p>
    </div>

    <script src="libs/anime/anime.min.js"></script>
    <script src="libs/glide/glide.min.js"></script>
    <script src="libs/isotope/isotope.pkgd.min.js"></script>
    <script src="libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
    <script src="index.js"></script>
</body>

</html>